<template>
	<view
		class="search flex align-items_center sticky"
		:style="{
			paddingTop: mgTop,
			'line-height': lineHeight,
			height: upperHeight,
			top: '0rpx',
			background: '#fff'
		}">
		<image
			@click="back"
			class="search-back"
			src="https://aph.junhecms.com/image/homePage/0.png" />
		<view class="search-u">
			<u-search
				style="display: flex"
				actionText=""
				placeholder="搜索"
				v-model="keyword"></u-search>
		</view>
	</view>
	<view class="result" v-if="keyword">
		<u-gap height="30rpx"></u-gap>
		<view class="maxTitle">搜索结果</view>
		<view class="dotData" v-if="resultLen <= 0">数据为空</view>
		<view v-for="(item, index) in result" :key="index">
			<view
				v-for="(child, index2) in item.list"
				:key="index2"
				class="item"
				@click="searchJump(child, item.key)">
				<u-parse :content="child.name"></u-parse>
			</view>
		</view>
	</view>

	<u-gap height="70rpx"></u-gap>
	<view class="main">
		<view class="maxTitle">热门搜索</view>
		<view
			class="main-item flex align-items_center"
			v-for="(item, index) in hotList.slice(0, openHot ? hotList.length : 5)"
			@click="jump(index)"
			:key="item">
			<image mode="aspectFill" src="@/static/1.png" />
			{{ item.title }}
		</view>
	</view>

	<view v-if="hotList.length > 5" class="seeMore flex-center" @click="openHot = !openHot">
		{{ openHot ? '收起' : '查看更多' }}
		<image
			:style="{ transform: `rotate(${openHot ? 180 : 0}deg)` }"
			src="https://aph.junhecms.com/image/homePage/23.png" />
	</view>

	<u-gap height="50rpx"></u-gap>

	<share :isCustom="true" />
	<tabbar />
</template>

<script setup>
import { ref, watch } from 'vue';
import { getUpperHeight, navigateTo } from '@/utils/tool';
import { post } from '@/utils/collect.js';
import { baseUrl, pageJump, shaking } from '@/utils/tool.js';

uni.setStorageSync('navTitle', '普华永道');

const mgTop = getUpperHeight().mgTop + 'px';
const lineHeight = getUpperHeight().linHeight + 'px';
const upperHeight = getUpperHeight().linHeight + 6 + 'px';

const searchJump = (child, key) => {
	const jumpdata = key === 'product' ? 1 : key === 'book' ? 3 : key === 'news' ? 2 : 0;
	const data = {
		...child,
		jumpid: child.id,
		jumpdata
	};
	pageJump(data);
};

const keyword = ref('');

watch(
	() => keyword.value,
	() => {
		shaking(() => {
			_search();
		}, 600)();
	}
);

const resultLen = ref(0);
const result = ref([]);
const _search = () => {
	let list = [];
	result.value = [];
	resultLen.value = 0;
	if (!keyword.value) return;
	post('/index/search', { kword: keyword.value }).then((res) => {
		Object.keys(res.data).map((key) => {
			list = list.concat({
				list: res.data[key],
				key
			});
		});

		const regExp = new RegExp(keyword.value, 'g');

		list.forEach((item) => {
			const content = item.list.map((item2) => {
				return {
					...item2,
					name: item2.title.replace(
						regExp,
						`<text style="color: red">${keyword.value}</text>`
					)
				};
			});
			resultLen.value += content.length;
			result.value.push({
				list: content,
				key: item.key
			});
		});

		console.log(resultLen.value);
	});
};

const back = () => uni.navigateBack();

const jump = (index) => {
	const item = hotList.value[index];
	pageJump(item);
};

// 展开
const openHot = ref(false);

// 热门搜索
const hotList = ref([]);
const _searchHot = () => {
	post('/index/search_hot').then((res) => {
		hotList.value = res.data;
	});
};
_searchHot();
</script>

<style lang="scss" scoped>
:deep(._root ._block) {
	display: flex !important;
	flex-wrap: wrap;
}
.result {
	padding: 0rpx 30rpx;
	.item {
		padding: 30rpx 0rpx 0rpx 30rpx;
		font-size: 30rpx;
		color: #333333;
	}
}
.seeMore {
	font-weight: 500;
	font-size: 26rpx;
	color: #666666;
	text-align: center;
	margin-top: 150rpx;
	image {
		width: 27.01rpx;
		height: 14.99rpx;
		margin-left: 20rpx;
	}
}
.main {
	padding: 0rpx 30rpx;
	&-item {
		margin-top: 30rpx;
		image {
			width: 38rpx;
			height: 38rpx;
			margin-right: 24rpx;
		}
	}
}
.head {
	padding: 0rpx 10rpx;
	.maxTitle {
		padding: 0rpx 20rpx;
	}
	&-item {
		width: fit-content;
		height: 63rpx;
		line-height: 63rpx;
		text-align: center;
		padding: 0rpx 20rpx;
		background: #f5f5f5;
		border-radius: 50rpx;
		margin-top: 20rpx;
		margin: 20rpx 10rpx 0rpx;
	}
	&-top {
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}
}
.maxTitle {
	font-weight: 500;
	font-size: 32rpx;
	color: #101010;
}
.search {
	&-u {
		width: 420rpx + 45rpx + 33rpx;
		margin-left: 16rpx;
	}

	&-back {
		width: 44rpx;
		height: 44rpx;
		margin-left: 30rpx;
	}
}
</style>
